<script>
import {defineComponent} from 'vue'
import LineChart from "@/pie/lineChart.vue";
import PieChart from "@/pie/pieChart.vue";
import CloudChart from "@/pie/cloudChart.vue";
import CnMap from "@/pie/cnMap.vue";
import SiperText from "@/pie/siperText.vue";

export default defineComponent({
    name: "myEchats",
    components: {SiperText, CnMap, CloudChart, PieChart, LineChart},
    data(){
        return{
            Sum:'',
        }
    },
    methods:{
       getSum(data){
            this.Sum=data;
        }
    }
})
</script>

<template>
    <div id="bodys">
        <img src="../.././public/images/logo.png" style="width: 120px; margin: 0 auto">
        <div class="content">
            <div class="left" style="position: relative">
                <div class="title">
                    <p>统计数据</p>
                </div>
                <p style="color: white;position: absolute;top: 50px;left:280px;font-size: 20px">数据总量</p>
                <p style="color: rgb(26, 243, 240);position: absolute;top: 90px;left:280px;font-size: 30px">{{ Sum }}</p>
                <cn-map @DataSum="getSum"></cn-map>
            </div>
            <div class="right">
                <div class="title">
                    <p>任务数据</p>
                </div>
                <div class="lineBox"> <p class="chartTitle">舆情走势</p>
                    <line-chart class="line"></line-chart>
                </div>
                <div class="pieBox">
                    <p class="chartTitle">媒体活跃占比</p>
                    <pie-chart class="pie"></pie-chart>
                </div>
                <div class="cloudBox">
                    <p class="chartTitle">词云</p>
                    <cloud-chart class="cloud"></cloud-chart>
                </div>
                <div class="swiperBox">
                    <p class="chartTitle">热点信息</p>
                    <siper-text class="swiper"></siper-text>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
#bodys {
  width: 100vw;
  height: 100vh;
  background-image: url("../.././public/images/yuqing.76669b57195f44977131.png");
  text-align: center;
  padding: 20px 50px 0 50px;
}

.content {
  display: flex;
  justify-content: space-between;
  height: 85vh;
  margin-top: 20px;

  > div {
    background-image: url("../.././public/images/screen-border.08113e772d75d7b170c8.png");
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  > .left {
    width: 45%;
  }

  > .right {
    width: 55%;
    position: relative;
  }

  .title {
    background-image: url("../.././public/images/article.5e42a2c6c2b01756a190.png");
    height: 30px;
    background-size: 100% 100%;

    > p {
      background-image: linear-gradient(180deg, #33c2f2, #fff, #33c2f2);
      background-clip: text;
      font-size: 20px;
      color: transparent;
    }
  }
}
.lineBox{
    margin-top: 20px;
    margin-left: 60px;
    width: 49%;
    height: 50%;
    position: relative;
    >.chartTitle{
        position: absolute;
        color: rgb(26, 243, 240) !important;
        font-size: 14px;
        left: -30px;
    }

}
.pieBox{
    width: 49%;
    height: 50%;
    top: 65px;
    right: -20px;
    position: absolute;
    >.chartTitle{
        position: absolute;
        color: rgb(26, 243, 240) !important;
        font-size: 14px;
        left: 0px;
        top: -10px;

    }
}
.line{
    width: 100%;
    height: 90%;
    position: absolute;
    top: -20px;
}
.pie{
    width: 90%;
    height: 90%;
    position: absolute;
    top: 0px;
}
.cloudBox{
    width: 49%;
    height: 50%;
    top: 310px;
    left: 30px;
    position: absolute;
    >.chartTitle{
        position: absolute;
        color: rgb(26, 243, 240) !important;
        font-size: 14px;
        left: 0px;
        top: -10px;
    }
}
.swiperBox{
    width: 49%;
    height: 43%;
    top: 310px;
    right: -20px;
    position: absolute;
    >.chartTitle{
        position: absolute;
        color: rgb(26, 243, 240) !important;
        font-size: 14px;
        left: 0px;
        top: -10px;
        z-index: 22222;
    }

}
.swiper{
    height: 90%;
    width: 80%;
    position: absolute;
    top: 35px;
    right: 55px;

}
.cloud{
    width: 100%;
    height: 100%;
    position: absolute;
    top: -20px;
}
</style>